<!doctype html>
<html>

<head>
	<meta charset="utf-8" />
	<title>Your Application Name</title>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 先引入 Vue -->
	<script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script>
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<style>
		.item {
			width: 30%;
			float: left;
		}
		.red{
			background-color: red;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="item">
			<my-app :visible.sync="visible" @on-mask-show="on_mask_show" i-class="red">
				<button>点我不会关闭遮罩层</button>
			</my-app>
			<button @click="visible=true">显示遮罩1</button>
		</div>
		<div class="item">
			<my-app :visible.sync="visible2" :click-mask-close="false">
				<button @click="visible2=false">点我关闭</button>
			</my-app>
			<button @click="visible2=true">显示遮罩2</button>
			<p>遮罩2 点击遮罩不关闭</p>
		</div>
		<div class="item">
				<div style="margin-top: 700px"></div>
				<my-app :visible.sync="visible3"></my-app>
				<button @click="visible3=true">显示遮罩3</button>
				<ul>遮罩3 
					<li>1.在滚动条可视范围内，隐藏滚动条</li>
				</ul>
			</div>
	</div>
</body>
<script src="./dist/vendor.build.js"></script>
<script src="./dist/build.js"></script>

</html>